<template>
    <div class="home">
      <!-- 固定导航栏 -->
      <header class="navbar">
        <el-row>
          <el-col :span="24">
            <nav class="nav-content">
              <el-menu mode="horizontal" class="menu-bar">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">功能介绍</el-menu-item>
                <el-menu-item index="3">视频展示</el-menu-item>
                <el-menu-item index="4">关于作者</el-menu-item>
              </el-menu>
            </nav>
          </el-col>
        </el-row>
      </header>
  
      <header>
        <el-row class="header">
          <el-col :span="24">
            <h1>漫画框架生成软件</h1>
          </el-col>
        </el-row>
      </header>
  
      <!-- 视频展示部分 -->
      <section class="intro-section">
        <div class="container">
          <h2>欢迎使用漫画框架生成软件</h2>
          <p>通过我们的软件，快速生成漫画动画框架，提供多种样式的对话框设计，一键导出，提升创作效率。</p>
  
          <!-- 视频展示 -->
          <div class="video-wrapper">
            <el-card shadow="hover" class="video-card">
              <video controls width="100%">
                <source src="/assets/1.mp4" type="video/mp4" />
                你的浏览器不支持视频标签。
              </video>
            </el-card>
          </div>
        </div>
      </section>
  
      <!-- 功能介绍部分 -->
      <section class="features-section">
        <div class="container">
          <h2>软件功能</h2>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(feature, index) in features" :key="index">
              <el-card shadow="hover" class="feature-card">
                <img :src="feature.image" alt="功能图片" class="feature-img" />
                <div class="feature-content">
                  <h3>{{ feature.title }}</h3>
                  <p>{{ feature.description }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </section>
  
      <!-- 关于作者 -->
      <section class="about-section">
        <div class="container">
          <h2>关于作者</h2>
          <p>本软件由 Sky小澈开发，致力于为漫画创作者提供高效的创作工具。</p>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Home',
    data() {
      return {
        // 功能介绍部分的内容
        features: [
          {
            title: '框架生成',
            description: '快速生成漫画动画框架，助力创作者高效完成作品。',
            image: '/assets/bg1.jpg',
          },
          {
            title: '对话框设计',
            description: '提供多种样式的对话框，满足不同需求。',
            image: '/assets/bg2.jpg',
          },
          {
            title: '一键导出',
            description: '轻松导出生成的漫画框架和素材，便于后续编辑。',
            image: '/assets/bg3.jpg',
          },
        ],
      };
    },
  };
  </script>
  
  <style scoped>
  /* 样式配置 */
  .home {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    padding-top: 60px; /* 为固定导航栏留出空间 */
    margin: 0;
  }
  
  .navbar {
    background-color: #409EFF;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
  }
  
  .nav-content {
    text-align: center;
  }
  
  .menu-bar {
    background-color: #409EFF;
    border: none;
  }
  
  .menu-bar .el-menu-item {
    color: white;
    font-size: 18px;
    font-weight: bold;
  }
  
  .menu-bar .el-menu-item:hover {
    background-color: #66b1ff;
  }
  
  .header {
    text-align: center;
    margin-bottom: 20px;
  }
  
  h1 {
    font-size: 36px;
    color: #409EFF;
  }
  
  .intro-section {
    text-align: center;
    margin-bottom: 40px;
  }
  
  h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #409EFF;
  }
  
  p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
  }
  
  .video-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .video-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .features-section {
    margin-bottom: 40px;
  }
  
  .feature-card {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .feature-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .feature-content {
    padding: 10px 0;
    text-align: center;
  }
  
  .about-section {
    text-align: center;
    background-color: #eaeaea;
    padding: 40px;
    border-radius: 8px;
  }
  
  .about-section h2 {
    font-size: 28px;
    color: #409EFF;
  }
  
  .about-section p {
    font-size: 18px;
    color: #666;
  }
  </style>
  